import "vue-router";

function identity1<T>(value: T): T {
  console.log(value.length); // 类型“T”上不存在属性“length”
  return value;
}

// 通过 extends 添加约束条件
function identity2<T extends { length: number }>(value: T): T {
  console.log(value.length); // 类型“T”上不存在属性“length”
  return value;
}

identity2("1111");
identity2(18);
identity2([1, 2, 3]);
identity2({ length: "18" });

document.querySelector<HTMLInputElement>("#box");

/**
 * keyof 关键字
 *
 *    作用：能将一个对象类型的所有键名获取到，组成一个联合类型
 */
interface Person {
  name: string;
  age: number;
  sex: string;
}

interface Animal {
  a: string;
  b: string;
}

type Keys = keyof Person; // "name" | "age" | "sex"

const a1: Keys = "age";

const p: Person = {
  name: "张三",
  age: 18,
  sex: "男",
};

const p2: Animal = {
  a: "111",
  b: "222",
};

function getProperty<T, U extends keyof T>(obj: T, key: U) {
  return obj[key];
}

getProperty(p, "name"); // 返回值是 18
getProperty(p, "name");

getProperty(p2, "b");

// addEventListener<K extends keyof HTMLElementEventMap>
// (
//   type: K,
//   listener: (this: HTMLFormElement, ev: HTMLElementEventMap[K]) => any,
//   options?: boolean | AddEventListenerOptions
// ): void;

// document.addEventListener<"click" | "focus">("")
document.querySelector("a");

export {};
